<template>
  <div ref="chart"
       style="width: 100%; height: 100%" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
export default {
  name: 'EchartsLine',
  props: {
    id: String,
    dataSet: Array
  },
  watch: {
    dataSet: {
      handler (newName, oldName) {
        this.init()
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const chartView = echarts.init(this.$refs.chart)
      chartView.setOption({
        // legend: {},
        // tooltip: {},
        // dataset: {
        //   source: this.dataSet
        //   //  [
        //   //   ['product', '2012', '2013', '2014', '2015'],
        //   //   ['儿童', 41.1, 30.4, 65.1, 53.3],
        //   //   ['家属', 86.5, 92.1, 85.7, 83.1],
        //   //   ['社区', 24.1, 67.2, 79.5, 86.4],
        //   //   ['夕阳', 41.1, 30.4, 65.1, 53.3]
        //   // ]
        // },
        // xAxis: [
        //   { type: 'category', gridIndex: 0 },
        //   { type: 'category', gridIndex: 1 }
        // ],
        // yAxis: [
        //   { gridIndex: 0 },
        //   { gridIndex: 1 }
        // ],
        // grid: [
        //   { bottom: '55%' },
        //   { top: '55%' }
        // ],
        // series: [
        //   // These series are in the first grid.
        //   { type: 'bar', seriesLayoutBy: 'row' },
        //   { type: 'bar', seriesLayoutBy: 'row' },
        //   { type: 'bar', seriesLayoutBy: 'row' },
        //   { type: 'bar', seriesLayoutBy: 'row' },
        //   // These series are in the second grid.
        //   { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        //   { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        //   { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
        //   { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
        // ]
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
          // formatter:function (params){
          //     let html = params[0].name+"<br>";
          //     // for(let i = 0;i<8;++i){
          //     //     html+=params[i].seriesName+':'+params[i].dataIndex+'<br>';
          //     // }
          //     for(let i = 0;i<8;++i){
          //         html+={bi}+':'+{ci}+'<br>';
          //     }

          //     // for (let i =8;i<14;++i){
          //     //     html+=params[i].seriesName+':'+(params[i].dataIndex/params[7].dataIndex)*100+'%<br>'
          //     // }
          //     for (let i =8;i<14;++i){
          //         html+={bi}+':'+({ci}/{c7})*100+'%<br>'
          //     }
          //     return html;
          // }
        },
        legend: {
          data: ['社区关爱', '夕阳论坛', '家属求助（未）', '家属求助（完）', '儿童发布（未）', '儿童发布（完）']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27']
          }
        ],
        yAxis: [
          {
            type: 'value'

          }
        ],
        series: [
          {
            name: '社区关爱',
            type: 'bar',

            emphasis: {
              focus: 'series',
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            },

            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '夕阳论坛',
            type: 'bar',
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            },

            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '家属求助（未）',
            type: 'bar',
            stack: '家属求助',

            emphasis: {
              focus: 'series',
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            },

            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '家属求助（完）',
            type: 'bar',
            stack: '家属求助',
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            },

            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '儿童发布（未）',
            type: 'bar',
            stack: '儿童发布',
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            },

            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '儿童发布（完）',
            type: 'bar',
            stack: '儿童发布',
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            },

            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '总值',
            type: 'bar',
            data: [1180, 1292, 1186, 1244, 1440, 1880, 1970],
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            },
            markLine: {
              lineStyle: {
                type: 'dashed'
              },
              data: [
                [{ type: 'min' }, { type: 'max' }]
              ]
            }
          },
          {
            name: '社区关爱',
            type: 'bar',
            stack: '总值',
            barWidth: 5,
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '夕阳论坛',
            type: 'bar',
            stack: '总值',
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '家属求助（未）',
            type: 'bar',
            stack: '总值',
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '家属求助（完）',
            type: 'bar',
            stack: '总值',
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '儿童发布（未）',
            type: 'bar',
            stack: '总值',
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: 'black'
                }
              }
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '儿童发布（完）',
            type: 'bar',
            stack: '总值',
            emphasis: {
              focus: 'series',
              label: {
                show: true,
                textStyle: {
                  color: 'black'
                }
              }
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ]
      })
    }
  }
}
</script>
